<template>
	<view class="content-box">
		<view class="" style="padding-bottom: 20rpx;" v-if="check==2||check==3">
			<!-- <u-alert v-if="check==2" title="审核通过" type="success" :description="successText"></u-alert> -->
			<u-alert v-if="check==3"title="驳回理由" type="error" :description="refuseReason"></u-alert>
		</view>

		<view class="card">
			<view class="head-img">
				<view class="title">
					头像
				</view>
				<image :src="$imageUrl(userInfo.avatar)||'/static/upHead.png'" mode="" @click="setImg('avatar')">
				</image>
			</view>
		</view>
		<view class="card" style="margin-top: 20rpx;">
			<view class="title">
				联系方式
			</view>
			<view class="input-box">
				<u--input v-model="userInfo.phone" placeholder="请输入手机号" border="none"
					placeholderStyle="color:#999999;font-size:28rpx;" maxlength="11"></u--input>
			</view>
			<view class="input-box" v-if="check!=1&&check!=2">
				<u--input placeholder="验证码" border="none" v-model="userInfo.verificationCode"
					placeholderStyle="color:#999999;font-size:28rpx;"></u--input>
				<view class="get-code" :class="{forbid:codeTime>0}" @click="getCode">
					{{codeTime>0?`${codeTime}s 后重新获取`:'获取验证码'}}
				</view>
			</view>
			<view class="title" style="margin-top: 40rpx;">
				真实姓名
			</view>
			<view class="input-box">
				<u--input v-model="userInfo.realName" placeholder="请输入姓名" border="none"
					placeholderStyle="color:#999999;font-size:28rpx;"></u--input>
			</view>
			<view class="title" style="margin-top: 40rpx;">
				身份证号码
			</view>
			<view class="input-box">
				<u--input v-model="userInfo.idCard" placeholder="请输入身份证号" border="none"
					placeholderStyle="color:#999999;font-size:28rpx;"></u--input>
			</view>

			<view class="title" style="margin-top: 40rpx;">
				接单位置
			</view>
			<view class="input-box" @click="setPlace">
				{{userInfo.address||'请选择'}}
			</view>


			<view class="title" style="margin-top: 40rpx;">
				驾龄
			</view>
			<view style="display: flex;align-items: center;padding-right: 40rpx;">
				<view class="input-box" style="flex: 1;padding-right: 28rpx;">
					<u--input v-model="userInfo.drivingYears" type="number" placeholder="请输入驾龄" border="none"
						placeholderStyle="color:#999999;font-size:28rpx;"></u--input>
				</view>
				<text style="font-weight: bold;font-size: 28rpx;">年</text>
			</view>
			<view
				style="display: flex;justify-content: space-between;align-items: center;margin-top: 40rpx;padding-right: 40rpx;">
				<view class="title">
					是否抽烟
				</view>
				<myRadio :list="list" name='isSmoking' @change="myRadioChange" :value="userInfo.isSmoking"></myRadio>
			</view>
			<view class="title" style="margin-top: 60rpx;">
				身份证件
			</view>
			<view class="hint">
				请上传本人正反面身份证照片
			</view>
			<view class="identity-card">
				<image :src="$imageUrl(userInfo.cardFront)||'/static/cardFront.png'" mode="" @click="setImg('cardFront')">
				</image>
				<image :src="$imageUrl(userInfo.cardBack)||'/static/cardBack.png'" mode="" @click="setImg('cardBack')">
				</image>
			</view>

			<view class="title" style="margin-top: 60rpx;">
				手持身份证件照片
			</view>
			<view class="hint">
				请上传手持身份证件照片
			</view>
			<view class="identity-card">
				<image :src="$imageUrl(userInfo.cardHand)||'/static/cardHand.png'" mode="" @click="setImg('cardHand')">
				</image>
			</view>

			<view class="title" style="margin-top: 60rpx;">
				驾驶证照片
			</view>
			<view class="hint">
				请上传本人驾驶证（黑本）照片，注意信息完整，否则无法通过
			</view>
			<view class="identity-card">
				<image :src="$imageUrl(userInfo.driverLicense)||'/static/driverLicense.png'" mode=""
					@click="setImg('driverLicense')"></image>
			</view>


		</view>


		<view class="card" style="margin-top: 20rpx;">
			<view class="title">
				品牌·车型
			</view>
			<view class="form-item">
				<view class="lable">
					选择座位数
				</view>
				<view class="tag-box">
					<view class="tag-item" :class="{'active-item':userInfo.seatingNumber===item.value}"
						v-for="item in typeList" @click="setTypeIndex(item.value)">
						{{item.text}}
					</view>
				</view>
			</view>
			<view class="form-item" style="margin-top: 8rpx;">
				<view class="lable">
					品牌车型
				</view>
				<view class="value" @click="brandShow=true" style="display: flex;align-items: center;">
					{{userInfo.carBrand?userInfo.carBrand+' - '+userInfo.carSeries:'请选择'}} <u-icon
						name="arrow-right"></u-icon>
				</view>
			</view>
		</view>

		<view class="card" style="margin-top: 20rpx;">
			<view class="title">
				车辆照片
				<text class="hint">
					请上传真实车辆照片
				</text>
			</view>
			<view class="vehicle-photo">
				<image :src="$imageUrl(userInfo.carPhoto)||'/static/order/image_.png'" mode=""
					@click="setImg('carPhoto')">
				</image>
			</view>

			<view class="title">
				车牌号码
			</view>

			<view class="licencePlate">
				<car-number-input @numberInputResult="numberInputResult"
					:defaultStr="userInfo.licenseNumber"></car-number-input>
			</view>
			<view class="title">
				行驶证照片
			</view>
			<text class="hint" style="padding:20rpx 10rpx;">
				请上传行驶证(蓝本)照片，注意信息完成，否则无法通过
			</text>
			<view class="vehicle-photo">
				<image :src="$imageUrl(userInfo.drivingLicense)||'/static/order/image_.png'" mode=""
					@click="setImg('drivingLicense')">
				</image>
			</view>	
			
			
<!-- 			<view class="vehicle-photo" style="margin-top: 36rpx;">
				<image src="../../../static/logo.png" mode=""></image>
			</view> -->
			
		</view>
		<view class="clause-box" v-if="check!=1&&check!=2">
			<view class="select-box" :class="{'select-box-active':agreement}" @click="agreement=!agreement"
				style="margin-right: 16rpx;">
				<u-icon name="checkbox-mark" color="#ffffff"></u-icon>
			</view>
			我已阅读并同意 <text @click="$routeTo('/pages/me/settingUp/agreementDetails/agreementDetails?type=5')">《宠物运输契约条款》</text>
		</view>
		<view class="btn" @click="$u.throttle(submit, 500)" v-if="check!=1&&check!=2">
			{{check==3?'重新提交':'提交'}}
		</view>
		<view v-else class="btn" :style="check==1?'filter: grayscale(100%)':'background:#53c21d'">
			{{check==1?'审核中':'审核已通过'}}
		</view>
		<Loading></Loading>

		<view class="keep-out" v-if="check==1||check==2">

		</view>
		<u-toast ref="uToast"></u-toast>
		<u-picker :show="brandShow" keyName="name" ref="uPicker" closeOnClickOverlay :loading="loading" :columns="brandList"
			@confirm="confirm" @cancel="brandShow=false" @close="brandShow=false" @change="changeHandler"></u-picker>
			
		<l-clipper v-if="clipperShow" :image-url="upImageUrl" @success="clipperSuccess" @cancel="clipperShow = false"  />

	</view>
</template>

<script>
	import myRadio from '@/components/myRadio.vue'
	export default {
		components: {
			myRadio
		},
		data() {
			return {
				agreement: false,
				list: [{
						name: '是',
						value: 1
					},
					{
						name: '否',
						value: 0
					}
				],
				typeList: [{
					text: '五座',
					value: 5
				}, {
					text: '七座',
					value: 7
				}, {
					text: '九座',
					value: 9
				}],
				typeIndex: -1,
				defaultNum: '京A',
				brandList: [],
				brandShow: false,
				loading: false,
				check: 0,
				refuseReason: '',
				userInfo: {
					avatar: '',
					phone: '',
					realName: '',
					idCard: '',
					isSmoking: '',
					cardFront: '',
					cardBack: '',

					cardHand: '',
					seatingNumber: '',
					carBrand: '',
					carSeries: '',
					carPhoto: '',
					licenseNumber: '',
					drivingLicense: '',
					driverLicense: '',
					drivingYears: '',

					addressLng: '',
					addressLat: '',
					address: '',
					areaCode: '',

					verificationCode: ''
				},

				codeTime: -1,
				
				clipperShow:false,
				upImageUrl:''

 
				// successText: '登录账号为注册手机号，默认密码：123456'
			}
		},

		onLoad() {
			let that = this
			uni.login({
				provider: 'weixin',
				success: function(loginRes) {
					that.$myRequest('/api/driver/home/v1/authCheck', {
						openCode: loginRes.code
					}).then(res => {
						let data = res.data
						for (let key in that.userInfo) {
							that.userInfo[key] = data[key]
						}
						that.check = data.check
						that.refuseReason = data.refuseReason
						if(data.check==2) uni.setStorageSync('authStatus', 3);
					})


					that.$myRequest('/api/driver/home/v1/carBrand', {
						type: 1
					}).then(res => {
						that.brandList[0] = res.data
						that.getBrandList(res.data[0].id)
					})
				}
			})

		},
		methods: {
			getBrandList(brandId) {
				// let picker = this.$refs.uPicker
				this.$myRequest('/api/driver/home/v1/carBrand', {
					type: 2,
					brandId
				}).then(res => {
					this.brandList[1] = res.data
					// picker.setColumnValues(1, res.data)
					this.loading = false
				})
			},
			changeHandler(e) {
				const {
					columnIndex,
					index,
				} = e
				if (columnIndex === 0) {
					this.loading = true
					// console.log(columnIndex,index)
					this.getBrandList(this.brandList[0][index].id)
				}
			},
			confirm(e) {
				this.userInfo.carBrand = e.value[0].name
				this.userInfo.carSeries = e.value[1].name
				this.brandShow = false
			},
			getCode() {
				this.codeTime = 60
				this.$myRequest('/api/system/v1/sms/get', {
					mobile: this.userInfo.phone,
					type: 2
				}, 'POST').then(res => {
					let time = setInterval(() => {
						if (this.codeTime < 0) return clearInterval(time)
						this.codeTime--
					}, 1000)
				})

			},
			setPlace() {
				let that = this
				uni.chooseLocation({
					success: function(res) {
						console.log(res)
						that.userInfo.addressLng = res.longitude
						that.userInfo.addressLat = res.latitude
						that.userInfo.address = res.name

						uni.request({
							url: 'https://restapi.amap.com/v3/geocode/regeo',
							data: {
								key: 'a1b1763664b900d6f3a61dd992973dbf',
								location: `${res.longitude},${res.latitude}`
							},
							success(ress) {
								let data=ress.data.regeocode.addressComponent
								that.userInfo.areaCode = data.adcode
                              that.userInfo.address = data.city+data.district+data.township
							}
						})

					},
					fail: function(err) {
						wx.getSetting({
							success: function(res) {
								var statu = res.authSetting;
								if (!statu['scope.userLocation']) {
									wx.showModal({
										title: '是否授权当前位置',
										content: '需要获取您的地理位置，请确认授权，否则地图功能将无法使用',
										success(tip) {
											if (tip.confirm) {
												wx.openSetting({
													success: function(data) {
														if (data.authSetting[
																"scope.userLocation"
															] === true) {
															wx.showToast({
																title: '授权成功',
																icon: 'success',
																duration: 1000
															})
															//回调 重新打开地图
															that.setPlace()
														}
													}
												})
											} else {
												wx.showToast({
													title: '授权失败',
													icon: 'none',
													duration: 1000
												})
											}
										}
									})

								}
							}
						})

					}
				});
			},
			setImg(name) {
				let that = this
				uni.chooseMedia({
					count: 1, //默认9
					mediaType: ['image'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: function(res) {
						
						
						if(name==='avatar'){
							that.upImageUrl= res.tempFiles[0].tempFilePath
							that.clipperShow=true
						}else{
							that.$uploadFiles({
								filePath: res.tempFiles[0].tempFilePath,
								formData: {
									type: 1
								}
							}).then(res => {
								
								that.userInfo[name] = res.data
								console.log(res.data)
							})
						}

	
					}
				});
			},
			clipperSuccess(e){
				this.clipperShow=false
				this.$uploadFiles({
					filePath: e.url,
					formData: {
						type: 1
					}
				}).then(res => {
					this.userInfo['avatar'] = res.data
				})
				console.log(e)
			},
			myRadioChange(name, value) {
				this.userInfo[name] = value
				console.log(name, value)
			},
			setTypeIndex(value) {
				if (this.userInfo.seatingNumber === value) return this.userInfo.seatingNumber = '';
				this.userInfo.seatingNumber = value
			},
			numberInputResult(e) {
				this.userInfo.licenseNumber = e
				console.log('结果--' + e)
			},
			submit() {
				if (!this.agreement) return uni.showToast({
					title: '请先同意并勾选下方协议',
					icon: 'none'
				});
				let data = this.userInfo
				let that = this
				let toastText={
					avatar: '请先上传头像',
					phone: '请输入联系方式',
					realName: '请输入真实姓名',
					idCard: '请输入身份证号',
					isSmoking: '',
					cardFront: '请上传身份证正面',
					cardBack: '请上传身份证反面',
					
					cardHand: '请上传手持身份证照片',
					seatingNumber: '请选择车辆座位数',
					carBrand: '请选择车辆品牌',
					carSeries: '请选择车辆型号',
					carPhoto: '请上传车辆图片',
					licenseNumber: '请输入车牌号码',
					drivingLicense: '请上传行驶证照片',
					driverLicense: '请上传驾驶证照片',
					drivingYears: '请输入驾龄',	
					verificationCode: '请输入短信验证码'
				}
				let message=''
				for(let key in data){
					if(!data[key])message=toastText[key]
				}
				if(message) return that.$refs.uToast.show({
					message
				})
				
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						data.openCode = loginRes.code
						that.$myRequest('/api/driver/home/v1/enterAuth', data, 'POST').then(res => {
							that.$refs.uToast.show({
								message: "提交成功",
								complete() {
									uni.redirectTo({
										url: '/pages/joinDriver/joinDriver'
									});
								}
							})
						})
					}
				})

			}
		}
	}
</script>

<style lang="scss">
	.clause-box {
		margin-top: 20rpx;
		align-items: center;
		display: flex;
		font-size: 24rpx;
		color: #666666;
		padding-left: 20rpx;
	
		text {
			color: $theme-color;
		}
	}
	
	.select-box {
			width: 40rpx;
			height: 40rpx;
			border-radius: 14rpx;
			background-color: #DCDCDC;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.select-box-active{
			background-color: $theme-color;
		}
	
	
	
	.content-box {
		background-color: #F5F5F5;
		min-height: calc(100vh - 40rpx);
		padding-top: 20rpx;
		padding-bottom: 200rpx;

		.keep-out {
			position: fixed;
			top: 0;
			right: 0;
			left: 0;
			bottom: 0;
			z-index: 99;
		}

		.card {
			background-color: #ffffff;
			padding: 32rpx 0;

			.title {
				font-size: 28rpx;
				color: #333333;
				font-weight: 700;
				position: relative;
				padding-left: 20rpx;

				&:before {
					content: '';
					width: 12rpx;
					height: 24rpx;
					position: absolute;
					left: 0;
					top: 50%;
					transform: translateY(-50%);
					background: $theme-color;
				}
			}

			.hint {
				font-size: 24rpx;
				color: #999999;
				margin: 6rpx 20rpx 12rpx 20rpx;
			}

			.head-img {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-right: 40rpx;

				image {
					width: 200rpx;
					height: 200rpx;

				}
			}

			.identity-card {
				display: flex;
				justify-content: space-between;
				padding: 0 40rpx;

				image {
					width: 326rpx;
					height: 200rpx;
					border-radius: 8rpx;
				}
			}

			.input-box {
				background-color: #F3F3F3;
				margin: 20rpx 40rpx;
				padding: 0 20rpx;
				border-radius: 8rpx;
				height: 82rpx;

				display: flex;
				align-items: center;

				.get-code {
					min-width: 138rpx;
					padding: 0 20rpx;
					height: 60rpx;
					background: $theme-color;
					border-radius: 30rpx;
					text-align: center;
					font-size: 28rpx;
					line-height: 60rpx;
					color: #FFFFFF;
				}

				.forbid {
					filter: grayscale(100%);
				}
			}

			.form-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 40rpx;
				font-size: 28rpx;

				.lable {
					color: #999999;

				}

				.value {
					color: #666666;
				}
			}

			.tag-box {
				display: flex;
				flex-wrap: wrap;
				padding: 20rpx 0;
				justify-content: flex-end;

				.tag-item {
					padding: 12rpx 36rpx;
					background-color: rgba(203, 203, 203, 0.20);
					border-radius: 10rpx;
					border: 2rpx solid #CBCBCB;
					font-size: 28rpx;
					color: #999999;
					margin-left: 20rpx;
				}

				.active-item {
					background-color: rgba(254, 175, 172, 0.20);
					border: 2rpx solid #FEAFAC;
					color: #FEAFAC;
				}
			} 

			.vehicle-photo {
				width: 316rpx;
				height: 170rpx;
				margin: 20rpx 40rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.licencePlate {
				display: flex;
				padding: 20rpx 0 50rpx 0;
			}



		}

			.btn {
				width: 338rpx;
				height: 80rpx;
				background: #FFCE4E;
				border-radius: 40rpx;
				font-size: 28rpx;
				line-height: 80rpx;
				color: #FFFFFF;
				text-align: center;

				position: fixed;
				left: 50%;
				bottom: 60rpx;
				transform: translateX(-50%);
				// margin: 96rpx auto 20rpx auto;
			}
	}
</style>